<template>
  <div class="main-navbar">
    <div :class="['left-btn' , { 'main-navbar--fold': $store.state.sidebarFold }]"
         @click="$store.state.sidebarFold = !$store.state.sidebarFold">
         <i class="el-icon-s-unfold"></i>
    </div>
      <i class="el-icon-refresh-right" @click="refresh()"></i>
    <div class="right-btn">
      <el-dropdown>
        <span class="el-dropdown-link">
         <img src="../assets/images/logo.png"  class="loginimg">
          admin<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item divided @click="logoutHandle">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { getCurrentInstance, nextTick } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'Main-navbar',
  setup () {
    const router = useRouter()
    const store = useStore()
    const { ctx } = getCurrentInstance()
    // 刷新当前页面
    const refresh = () => {
      store.state.contentIsNeedRefresh = true
      nextTick(() => {
        store.state.contentIsNeedRefresh = false
      })
    }
    // 退出
    const logoutHandle = () => {
      ctx.$confirm('退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录信息
        router.push({ name: 'login' })
      }).catch(() => {
      })
    }
    return {
      logoutHandle,
      refresh
    }
  }
}
</script>
<style lang="scss" scoped>
 .loginimg {
   height: 1em;
   width:1em;
}
.el-icon-s-unfold{
  font-size: 0.8em;
  color:black
}
.el-icon-refresh-right{
    position: absolute;
    margin-left: 50px;
    font-size: 25px;
}
.el-icon-refresh-right:hover{
    cursor:pointer;
}
</style>
